//HomeView.vue
<script setup>
import { ref, computed, onMounted } from 'vue';
import httpUtils from '@/utils/http';

const data = ref([
])

const option = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: data.value.map(v => v.name)
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                type: 'line',
                data: data.value.map(v => v.value)
            }
        ]
    }
})

async function fetchData() {
    httpUtils.post('emp/list', {
        pageNum: 1,
        pageSize: 24
    }).then(res => {
        data.value = res.records.map(item => {
            return {
                name: item.empName,
                value: item.age
            }
        })
    }).catch(err => {
        console.log(err)
    })
}

onMounted(() => {
    fetchData()
})
</script>

<template>
    <e-charts class="chart" :option="option" />
</template>

<style>
.chart {
    height: 400px;
}
</style>